<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
</head>

<body>
  <div>
    <input id="id" type="text" placeholder="请输入编号">
    <input id="name" type="text" placeholder="请输入姓名">
    <input id="sex" type="text" placeholder="请输入性别">
    <input id="btn_add" type="button" value="添加">
  </div>

  <table id="table">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
    </tr>

    <tr>
      <td>1</td>
      <td>张三</td>
      <td>男</td>
      <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>男</td>
      <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>男</td>
      <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>

  </table>

  <script>
    function del_tr(obj) {
      var table = obj.parentNode.parentNode.parentNode;
      var tr = obj.parentNode.parentNode;
      table.removeChild(tr);
    }

    var button = document.getElementById("btn_add");
    button.setAttribute("onclick", "add()");

    function add() {
      var id = document.getElementById("id").value;
      var name = document.getElementById("name").value;
      var sex = document.getElementById("sex").value;

      var table = document.getElementById("table");
      table.innerHTML += "<tr><td>" + id +
        "</td><td>" + name +
        "</td><td>" + sex +
        "</td><td>" + "<a href=\"javascript:void(0);\" οnclick=\"del_tr(this)\">删除</a>" +
        "</td></tr>";

    }
  </script>
</body>

</html>